// 
import React, { Component } from 'react';
import { Block } from '_platform/components4max/Block';
import { BarChart } from '_platform/components4max/Charts/Bar';
import { Icon, notification } from 'antd';
const echarts = require('echarts');


export default class Chart4 extends Component {
    constructor() {
        super();
        this.state = {
            xdata : ['项目1', '项目2', '项目3', '项目4', '项目5', '项目6', '项目7', '项目8'],
            seriesdata1: ['45', '123', '65', '145', '54', '145', '56', '54'],
            seriesdata2: ['123', '44', '124', '34', '23', '123', '23', '15'],
        }
    }

    componentWillMount(){
        let {xdata,seriesdata1,seriesdata2} = this.state;
        let next = 9;
        setInterval(()=>{
            xdata.shift();
            xdata.push('项目'+(next++)%99);
            seriesdata1.shift();
            seriesdata1.push(Math.round(Math.random()*150)+50);
            seriesdata2.shift();
            seriesdata2.push(Math.round(Math.random()*150)+50);
            this.setState({xdata,seriesdata1,seriesdata2});
        },2100);
    }

    render() {
        return (
            <BarChart style={{ width: '100%', height: '100%' }}
                option={{
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        // formatter: function (datas) {
                        //     let totaldata = datas[0].value;
                        //     let factorydata = datas[1].value;
                        //     return ('已完成' + (factorydata / totaldata * 100).toFixed() + '%')
                        // }.bind(this)
                    },
                    grid: {
                        top: '30px',
                        bottom: '20px'
                    },
                    legend: {
                        data: ['已完成产值', '未完成产值'],
                        orient: 'horizontal',
                        x: 'right',
                        textStyle: {
                            color: '#fff'
                        },
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: this.state.xdata,
                            axisPointer: {
                                type: 'shadow'
                            },
                            axisLabel: {
                                color: '#fff'
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#ffffff'
                                }
                            },
                            axisTick: {
                                alignWithLabel: true
                            },
                            z: 5
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            // min: 0,
                            // max: 100,
                            // interval: 20,
                            axisLine: {
                                lineStyle: {
                                    color: '#ffffff'
                                }
                            },
                            axisLabel: {
                                // formatter: '{value}%',
                                color: '#fff'
                            }
                        },
                    ],
                    series: [
                        {
                            name: '已完成产值',
                            type: 'bar',
                            barWidth: '30%',
                            data: this.state.seriesdata1,
                            stack: '产值情况',
                            itemStyle: {
                                normal: {
                                    color: '#4de4f8'
                                }
                            }
                        },
                        {
                            name: '未完成产值',
                            type: 'bar',
                            barWidth: '30%',
                            data: this.state.seriesdata2,
                            stack: '产值情况',
                            itemStyle: {
                                normal: {
                                    color: 'red'
                                }
                            }
                        }
                    ]
                }}
            />
        )
    }
}
